<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><meta name="exporter-version" content="Evernote Mac 9.1.3 (458534)"/><meta name="author" content="流星"/><meta name="created" content="2020-09-07 06:45:23 +0000"/><meta name="source" content="desktop.mac"/><meta name="updated" content="2020-09-07 09:03:36 +0000"/><meta name="content-class" content="yinxiang.markdown"/><title>WebGL学习笔记</title></head><body><div style="font-size: 14px; margin: 0; padding: 0; width: 100%;"><h2 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 34px; border-bottom: 1px solid #dbdbdb; color: #333;">OpenGL ES着色器语言（GLSL ES）</h2>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">着色器是WebGL渲染三维图形的关键，GLSL ES是专门用来编写着色器的编程语言。语法与C语言较为类似。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">基础</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">1、程序是大小写敏感的。<br/>
2、每一个语句都应该以一个英文符号（；）结束。</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">执行次序：<br/>
从main()函数开始执行，所以着色器程序必须有且仅有一个main()函数，而且该函数不能接受任何参数，也不会有任何返回值，所以函数前只能用void关键字。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">注释</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">单行注释：//<br/>
多行注释：/*... */</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">数据值类型（数值和布尔值）</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">GLSL支持两种数据值类型：<br/>
数值类型：int整形（0、1、2）和float浮点型（3.14、0.23、1.0）。<br/>
布尔值类型：true和false。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">GLSL ES是强类型语言</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">声明变量时要求具体指明变量的数据类型。<br/>
定义函数如果有返回值需要指定返回值类型。<br/>
赋值（=）的时候，左右数据类型必须一样。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">基本类型</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">float、int、bool<br/>
类型转换：<br/>
转换为整型：int(float)、int(bool)<br/>
转换为浮点型：float(int)、float(bool)<br/>
转换为布尔型：bool(float)、bool(int)</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">矢量和矩阵</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">类型：<br/>
矢量 vec2 vec3 vec4 //具有2、3、4个浮点数元素的矢量<br/>
ivec2 ivec3 ivec4 //具有2、3、4个整型元素的矢量<br/>
bvec2 bvec3 bvec4 //具有2、3、4个布尔型元素的矢量<br/>
矩阵 mat2 mat3 mat4 //2x2、3x3、4x4的浮点数元素的矩阵</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">矢量构造函数</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">vec3 v3 = vec3(1.0,0.0,0.5); //(1.0,0.0,0.5)<br/>
vec2 v2 = vec2(v3); //(1.0,0.0)<br/>
vec4 v4 = vec4(1.0); //(1.0,1.0,1.0,1.0)<br/>
vec4 v4b = vec4(v2,v4); //(1.0,0.0,1.0,1.0)先用第一个参数中的元素填充，如果没填满，就接着使用第二个参数中的元素填充</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">矩阵构造函数</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">矩阵中的元素是按照列主序排列的<br/>
mat4 m4 = mat4(1.0,2.0,3.0,4.0,      //1.0,5.0,9.0,13.0<br/>
5.0,6.0,7.0,8.0,      //2.0,6.0,10.0,14.0<br/>
9.0,10.0,11.0,12.0,   //3.0,7.0,11.0,15.0<br/>
13.0,14.0,15.0,16.0);  //4.0,8.0,12.0,16.0</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">mat4 m4 = mat4(1.0);  //1.0,0.0,0.0,0.0<br/>
//0.0,1.0,0.0,0.0<br/>
//0.0,0.0,1.0,0.0<br/>
//0.0,0.0,0.0,1.0</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">当传入的数值的数量大于1，又没有达到矩阵元素的数量时会报错。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">访问元素</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">可以使用.或者[]访问<br/>
x y z w //分别返回1、2、3、4个分量<br/>
r g b a //分别返回1、2、3、4个分量<br/>
s t p q //分别返回1、2、3、4个分量<br/>
以上可以随意交换使用</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">mat4 m4 = mat4(1.0,2.0,3.0,4.0,      //1.0,5.0,9.0,13.0<br/>
5.0,6.0,7.0,8.0,      //2.0,6.0,10.0,14.0<br/>
9.0,10.0,11.0,12.0,    //3.0,7.0,11.0,15.0<br/>
13.0,14.0,15.0,16.0);  //4.0,8.0,12.0,16.0<br/>
vec4 v4 = m4[0]; //[1.0,2.0,3.0,4.0]<br/>
float m23 = m4[1][2]; //7.0</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">结构体</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">GLSL ES支持用户自定义类型，即结构体。使用关键字struct，将已存在的类型聚合到一起，就可以定义结构体。<br/>
struct light{ //定义结构体类型light<br/>
vec4 color;<br/>
vec3 position;<br/>
}</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">light l1,l2;//声明了light类型的变量l1、l2</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">结构体成员可以参与自身类型支持的任何运算，但是结构体本身只支持赋值（=）和比较（==和!=）</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">数组</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">只支持一维数组，创建时不需要使用new。<br/>
float floatArray[4]; //声明含有4个浮点数元素的数组<br/>
数组本身只支持[]，没有pop()和push()等操作。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">取样器（纹理）</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">GLSL ES支持的一种内置类型，必须通过该类型变量访问纹理。<br/>
有两种基本的取样器类型：<br/>
sampler2D<br/>
samplerCube<br/>
取样器变量只能是uniform变量，或者是需要访问纹理的函数的参数（如texture2D（）函数）。<br/>
唯一能赋值给取样器变量的就是纹理单元编号，而且必须使用WebGL方法gl.uniformli()来进行赋值。<br/>
除了=、==和!=，取样器不可以作为操作数参与运算。<br/>
取样器类型变量受到着色器支持的纹理单元的最大数量限制。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">程序流程控制：分支和循环</h4>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">if和if-else</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">GLSL ES中没有switch语句，过多的if或if-else语句会降低着色器的执行速度。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">for语句</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">在for语句中可以使用continue、break、discard。<br/>
discard只能在片元着色器中使用，表示放弃当前片元直接处理下一个片元。</p>
<h4 style="line-height: 160%; box-sizing: content-box; font-size: 20px; color: #333;">函数</h4>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">不能在一个函数中调用它本身（也就是说不允许递归）</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">参数限定词</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">in 向函数中传入值  函数内可以使用并且修改参数的值，但是不会影响传入的变量。<br/>
const in 向函数中传入值  函数内可以使用但不能修改参数的值。<br/>
out 在函数中被赋值并传出 传入变量的引用，如果在函数中被修改，会影响到函数外部。<br/>
inout 传入函数，同时在函数中被赋值并传出  传入变量的引用，函数可以使用变量的初始值，然后修改变量的值，会影响到函数外部。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">Attribute变量</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">attribute变量只能出现在顶点着色器中，只能被声明为全局变量，被用来表示逐顶点的信息。<br/>
顶点着色器能容纳的attribute变量的最大数目与设备有关，但至少支持8个。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">uniform变量</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">可以在顶点和片元着色器中使用，必须是全局变量，而且是只读的。<br/>
如果顶点和片元着色器中声明了同名的uniform变量，那么它就会被两个着色器共享。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">varying变量</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">必须是全局变量，它的任务是从顶点着色器向片元着色器传输数据，必须在两种着色器中声明同名、同类型的varying变量。</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">精度限定词</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">highp 高精度，顶点着色器的最低精度<br/>
mediump 中精度，片元着色器的最低精度<br/>
lowp 低精度</p>
<h5 style="line-height: 160%; box-sizing: content-box; font-weight: 700; font-size: 16px; color: #333;">预处理指令</h5>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">#if 条件表达式<br/>
条件表达式为真，执行这里<br/>
#endif</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">#ifdef 某宏<br/>
如果定义了某宏，执行这里<br/>
#endif</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">#ifndef 某宏<br/>
如果没有定义某宏，执行这里<br/>
#endif</p>
<p style="line-height: 160%; box-sizing: content-box; margin: 10px 0; color: #333;">预定义的内置宏<br/>
GL_ES 在OpenGL ES 2.0中定义为1<br/>
GL_FRAGMENT_PRECISION_HIGH 片元着色器支持hight精度</p>
</div><center style="display:none !important;visibility:collapse !important;height:0 !important;white-space:nowrap;width:100%;overflow:hidden">%23%23%20OpenGL%20ES%E7%9D%80%E8%89%B2%E5%99%A8%E8%AF%AD%E8%A8%80%EF%BC%88GLSL%20ES%EF%BC%89%0A%0A%E7%9D%80%E8%89%B2%E5%99%A8%E6%98%AFWebGL%E6%B8%B2%E6%9F%93%E4%B8%89%E7%BB%B4%E5%9B%BE%E5%BD%A2%E7%9A%84%E5%85%B3%E9%94%AE%EF%BC%8CGLSL%20ES%E6%98%AF%E4%B8%93%E9%97%A8%E7%94%A8%E6%9D%A5%E7%BC%96%E5%86%99%E7%9D%80%E8%89%B2%E5%99%A8%E7%9A%84%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80%E3%80%82%E8%AF%AD%E6%B3%95%E4%B8%8EC%E8%AF%AD%E8%A8%80%E8%BE%83%E4%B8%BA%E7%B1%BB%E4%BC%BC%E3%80%82%0A%0A%23%23%23%23%23%20%E5%9F%BA%E7%A1%80%0A1%E3%80%81%E7%A8%8B%E5%BA%8F%E6%98%AF%E5%A4%A7%E5%B0%8F%E5%86%99%E6%95%8F%E6%84%9F%E7%9A%84%E3%80%82%0A2%E3%80%81%E6%AF%8F%E4%B8%80%E4%B8%AA%E8%AF%AD%E5%8F%A5%E9%83%BD%E5%BA%94%E8%AF%A5%E4%BB%A5%E4%B8%80%E4%B8%AA%E8%8B%B1%E6%96%87%E7%AC%A6%E5%8F%B7%EF%BC%88%EF%BC%9B%EF%BC%89%E7%BB%93%E6%9D%9F%E3%80%82%0A%0A%E6%89%A7%E8%A1%8C%E6%AC%A1%E5%BA%8F%EF%BC%9A%0A%E4%BB%8Emain()%E5%87%BD%E6%95%B0%E5%BC%80%E5%A7%8B%E6%89%A7%E8%A1%8C%EF%BC%8C%E6%89%80%E4%BB%A5%E7%9D%80%E8%89%B2%E5%99%A8%E7%A8%8B%E5%BA%8F%E5%BF%85%E9%A1%BB%E6%9C%89%E4%B8%94%E4%BB%85%E6%9C%89%E4%B8%80%E4%B8%AAmain()%E5%87%BD%E6%95%B0%EF%BC%8C%E8%80%8C%E4%B8%94%E8%AF%A5%E5%87%BD%E6%95%B0%E4%B8%8D%E8%83%BD%E6%8E%A5%E5%8F%97%E4%BB%BB%E4%BD%95%E5%8F%82%E6%95%B0%EF%BC%8C%E4%B9%9F%E4%B8%8D%E4%BC%9A%E6%9C%89%E4%BB%BB%E4%BD%95%E8%BF%94%E5%9B%9E%E5%80%BC%EF%BC%8C%E6%89%80%E4%BB%A5%E5%87%BD%E6%95%B0%E5%89%8D%E5%8F%AA%E8%83%BD%E7%94%A8void%E5%85%B3%E9%94%AE%E5%AD%97%E3%80%82%0A%0A%23%23%23%23%23%20%E6%B3%A8%E9%87%8A%0A%E5%8D%95%E8%A1%8C%E6%B3%A8%E9%87%8A%EF%BC%9A%2F%2F%0A%E5%A4%9A%E8%A1%8C%E6%B3%A8%E9%87%8A%EF%BC%9A%2F*...%20*%2F%0A%0A%23%23%23%23%23%20%E6%95%B0%E6%8D%AE%E5%80%BC%E7%B1%BB%E5%9E%8B%EF%BC%88%E6%95%B0%E5%80%BC%E5%92%8C%E5%B8%83%E5%B0%94%E5%80%BC%EF%BC%89%0AGLSL%E6%94%AF%E6%8C%81%E4%B8%A4%E7%A7%8D%E6%95%B0%E6%8D%AE%E5%80%BC%E7%B1%BB%E5%9E%8B%EF%BC%9A%0A%E6%95%B0%E5%80%BC%E7%B1%BB%E5%9E%8B%EF%BC%9Aint%E6%95%B4%E5%BD%A2%EF%BC%880%E3%80%811%E3%80%812%EF%BC%89%E5%92%8Cfloat%E6%B5%AE%E7%82%B9%E5%9E%8B%EF%BC%883.14%E3%80%810.23%E3%80%811.0%EF%BC%89%E3%80%82%0A%E5%B8%83%E5%B0%94%E5%80%BC%E7%B1%BB%E5%9E%8B%EF%BC%9Atrue%E5%92%8Cfalse%E3%80%82%0A%0A%23%23%23%23%23%20GLSL%20ES%E6%98%AF%E5%BC%BA%E7%B1%BB%E5%9E%8B%E8%AF%AD%E8%A8%80%0A%E5%A3%B0%E6%98%8E%E5%8F%98%E9%87%8F%E6%97%B6%E8%A6%81%E6%B1%82%E5%85%B7%E4%BD%93%E6%8C%87%E6%98%8E%E5%8F%98%E9%87%8F%E7%9A%84%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E3%80%82%0A%E5%AE%9A%E4%B9%89%E5%87%BD%E6%95%B0%E5%A6%82%E6%9E%9C%E6%9C%89%E8%BF%94%E5%9B%9E%E5%80%BC%E9%9C%80%E8%A6%81%E6%8C%87%E5%AE%9A%E8%BF%94%E5%9B%9E%E5%80%BC%E7%B1%BB%E5%9E%8B%E3%80%82%0A%E8%B5%8B%E5%80%BC%EF%BC%88%3D%EF%BC%89%E7%9A%84%E6%97%B6%E5%80%99%EF%BC%8C%E5%B7%A6%E5%8F%B3%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B%E5%BF%85%E9%A1%BB%E4%B8%80%E6%A0%B7%E3%80%82%0A%0A%23%23%23%23%23%20%E5%9F%BA%E6%9C%AC%E7%B1%BB%E5%9E%8B%0Afloat%E3%80%81int%E3%80%81bool%0A%E7%B1%BB%E5%9E%8B%E8%BD%AC%E6%8D%A2%EF%BC%9A%0A%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%95%B4%E5%9E%8B%EF%BC%9Aint(float)%E3%80%81int(bool)%0A%E8%BD%AC%E6%8D%A2%E4%B8%BA%E6%B5%AE%E7%82%B9%E5%9E%8B%EF%BC%9Afloat(int)%E3%80%81float(bool)%0A%E8%BD%AC%E6%8D%A2%E4%B8%BA%E5%B8%83%E5%B0%94%E5%9E%8B%EF%BC%9Abool(float)%E3%80%81bool(int)%0A%0A%23%23%23%23%23%20%E7%9F%A2%E9%87%8F%E5%92%8C%E7%9F%A9%E9%98%B5%0A%E7%B1%BB%E5%9E%8B%EF%BC%9A%0A%E7%9F%A2%E9%87%8F%20vec2%20vec3%20vec4%20%2F%2F%E5%85%B7%E6%9C%892%E3%80%813%E3%80%814%E4%B8%AA%E6%B5%AE%E7%82%B9%E6%95%B0%E5%85%83%E7%B4%A0%E7%9A%84%E7%9F%A2%E9%87%8F%0A%20%20%20%20ivec2%20ivec3%20ivec4%20%2F%2F%E5%85%B7%E6%9C%892%E3%80%813%E3%80%814%E4%B8%AA%E6%95%B4%E5%9E%8B%E5%85%83%E7%B4%A0%E7%9A%84%E7%9F%A2%E9%87%8F%0A%20%20%20%20bvec2%20bvec3%20bvec4%20%2F%2F%E5%85%B7%E6%9C%892%E3%80%813%E3%80%814%E4%B8%AA%E5%B8%83%E5%B0%94%E5%9E%8B%E5%85%83%E7%B4%A0%E7%9A%84%E7%9F%A2%E9%87%8F%0A%E7%9F%A9%E9%98%B5%20mat2%20mat3%20mat4%20%2F%2F2x2%E3%80%813x3%E3%80%814x4%E7%9A%84%E6%B5%AE%E7%82%B9%E6%95%B0%E5%85%83%E7%B4%A0%E7%9A%84%E7%9F%A9%E9%98%B5%0A%0A%23%23%23%23%23%20%E7%9F%A2%E9%87%8F%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%0Avec3%20v3%20%3D%20vec3(1.0%2C0.0%2C0.5)%3B%20%2F%2F(1.0%2C0.0%2C0.5)%0Avec2%20v2%20%3D%20vec2(v3)%3B%20%2F%2F(1.0%2C0.0)%0Avec4%20v4%20%3D%20vec4(1.0)%3B%20%2F%2F(1.0%2C1.0%2C1.0%2C1.0)%0Avec4%20v4b%20%3D%20vec4(v2%2Cv4)%3B%20%2F%2F(1.0%2C0.0%2C1.0%2C1.0)%E5%85%88%E7%94%A8%E7%AC%AC%E4%B8%80%E4%B8%AA%E5%8F%82%E6%95%B0%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E5%A1%AB%E5%85%85%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%B2%A1%E5%A1%AB%E6%BB%A1%EF%BC%8C%E5%B0%B1%E6%8E%A5%E7%9D%80%E4%BD%BF%E7%94%A8%E7%AC%AC%E4%BA%8C%E4%B8%AA%E5%8F%82%E6%95%B0%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E5%A1%AB%E5%85%85%0A%0A%23%23%23%23%23%20%E7%9F%A9%E9%98%B5%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%0A%E7%9F%A9%E9%98%B5%E4%B8%AD%E7%9A%84%E5%85%83%E7%B4%A0%E6%98%AF%E6%8C%89%E7%85%A7%E5%88%97%E4%B8%BB%E5%BA%8F%E6%8E%92%E5%88%97%E7%9A%84%0Amat4%20m4%20%3D%20mat4(1.0%2C2.0%2C3.0%2C4.0%2C%20%20%20%20%20%20%2F%2F1.0%2C5.0%2C9.0%2C13.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%205.0%2C6.0%2C7.0%2C8.0%2C%20%20%20%20%20%20%2F%2F2.0%2C6.0%2C10.0%2C14.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%209.0%2C10.0%2C11.0%2C12.0%2C%20%20%20%2F%2F3.0%2C7.0%2C11.0%2C15.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2013.0%2C14.0%2C15.0%2C16.0)%3B%20%20%2F%2F4.0%2C8.0%2C12.0%2C16.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0Amat4%20m4%20%3D%20mat4(1.0)%3B%20%20%2F%2F1.0%2C0.0%2C0.0%2C0.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F0.0%2C1.0%2C0.0%2C0.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F0.0%2C0.0%2C1.0%2C0.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F0.0%2C0.0%2C0.0%2C1.0%0A%0A%E5%BD%93%E4%BC%A0%E5%85%A5%E7%9A%84%E6%95%B0%E5%80%BC%E7%9A%84%E6%95%B0%E9%87%8F%E5%A4%A7%E4%BA%8E1%EF%BC%8C%E5%8F%88%E6%B2%A1%E6%9C%89%E8%BE%BE%E5%88%B0%E7%9F%A9%E9%98%B5%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%B0%E9%87%8F%E6%97%B6%E4%BC%9A%E6%8A%A5%E9%94%99%E3%80%82%0A%0A%23%23%23%23%23%20%E8%AE%BF%E9%97%AE%E5%85%83%E7%B4%A0%0A%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8.%E6%88%96%E8%80%85%5B%5D%E8%AE%BF%E9%97%AE%0Ax%20y%20z%20w%20%2F%2F%E5%88%86%E5%88%AB%E8%BF%94%E5%9B%9E1%E3%80%812%E3%80%813%E3%80%814%E4%B8%AA%E5%88%86%E9%87%8F%0Ar%20g%20b%20a%20%2F%2F%E5%88%86%E5%88%AB%E8%BF%94%E5%9B%9E1%E3%80%812%E3%80%813%E3%80%814%E4%B8%AA%E5%88%86%E9%87%8F%0As%20t%20p%20q%20%2F%2F%E5%88%86%E5%88%AB%E8%BF%94%E5%9B%9E1%E3%80%812%E3%80%813%E3%80%814%E4%B8%AA%E5%88%86%E9%87%8F%0A%E4%BB%A5%E4%B8%8A%E5%8F%AF%E4%BB%A5%E9%9A%8F%E6%84%8F%E4%BA%A4%E6%8D%A2%E4%BD%BF%E7%94%A8%0A%0Amat4%20m4%20%3D%20mat4(1.0%2C2.0%2C3.0%2C4.0%2C%20%20%20%20%20%20%2F%2F1.0%2C5.0%2C9.0%2C13.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%205.0%2C6.0%2C7.0%2C8.0%2C%20%20%20%20%20%20%2F%2F2.0%2C6.0%2C10.0%2C14.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%209.0%2C10.0%2C11.0%2C12.0%2C%20%20%20%20%2F%2F3.0%2C7.0%2C11.0%2C15.0%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%2013.0%2C14.0%2C15.0%2C16.0)%3B%20%20%2F%2F4.0%2C8.0%2C12.0%2C16.0%0Avec4%20v4%20%3D%20m4%5B0%5D%3B%20%2F%2F%5B1.0%2C2.0%2C3.0%2C4.0%5D%0Afloat%20m23%20%3D%20m4%5B1%5D%5B2%5D%3B%20%2F%2F7.0%0A%0A%23%23%23%23%23%20%E7%BB%93%E6%9E%84%E4%BD%93%0AGLSL%20ES%E6%94%AF%E6%8C%81%E7%94%A8%E6%88%B7%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8D%B3%E7%BB%93%E6%9E%84%E4%BD%93%E3%80%82%E4%BD%BF%E7%94%A8%E5%85%B3%E9%94%AE%E5%AD%97struct%EF%BC%8C%E5%B0%86%E5%B7%B2%E5%AD%98%E5%9C%A8%E7%9A%84%E7%B1%BB%E5%9E%8B%E8%81%9A%E5%90%88%E5%88%B0%E4%B8%80%E8%B5%B7%EF%BC%8C%E5%B0%B1%E5%8F%AF%E4%BB%A5%E5%AE%9A%E4%B9%89%E7%BB%93%E6%9E%84%E4%BD%93%E3%80%82%0Astruct%20light%7B%20%2F%2F%E5%AE%9A%E4%B9%89%E7%BB%93%E6%9E%84%E4%BD%93%E7%B1%BB%E5%9E%8Blight%0A%20%20%20%20vec4%20color%3B%0A%20%20%20%20vec3%20position%3B%0A%7D%0A%0Alight%20l1%2Cl2%3B%2F%2F%E5%A3%B0%E6%98%8E%E4%BA%86light%E7%B1%BB%E5%9E%8B%E7%9A%84%E5%8F%98%E9%87%8Fl1%E3%80%81l2%0A%0A%E7%BB%93%E6%9E%84%E4%BD%93%E6%88%90%E5%91%98%E5%8F%AF%E4%BB%A5%E5%8F%82%E4%B8%8E%E8%87%AA%E8%BA%AB%E7%B1%BB%E5%9E%8B%E6%94%AF%E6%8C%81%E7%9A%84%E4%BB%BB%E4%BD%95%E8%BF%90%E7%AE%97%EF%BC%8C%E4%BD%86%E6%98%AF%E7%BB%93%E6%9E%84%E4%BD%93%E6%9C%AC%E8%BA%AB%E5%8F%AA%E6%94%AF%E6%8C%81%E8%B5%8B%E5%80%BC%EF%BC%88%3D%EF%BC%89%E5%92%8C%E6%AF%94%E8%BE%83%EF%BC%88%3D%3D%E5%92%8C!%3D%EF%BC%89%0A%0A%23%23%23%23%23%20%E6%95%B0%E7%BB%84%0A%E5%8F%AA%E6%94%AF%E6%8C%81%E4%B8%80%E7%BB%B4%E6%95%B0%E7%BB%84%EF%BC%8C%E5%88%9B%E5%BB%BA%E6%97%B6%E4%B8%8D%E9%9C%80%E8%A6%81%E4%BD%BF%E7%94%A8new%E3%80%82%0Afloat%20floatArray%5B4%5D%3B%20%2F%2F%E5%A3%B0%E6%98%8E%E5%90%AB%E6%9C%894%E4%B8%AA%E6%B5%AE%E7%82%B9%E6%95%B0%E5%85%83%E7%B4%A0%E7%9A%84%E6%95%B0%E7%BB%84%0A%E6%95%B0%E7%BB%84%E6%9C%AC%E8%BA%AB%E5%8F%AA%E6%94%AF%E6%8C%81%5B%5D%EF%BC%8C%E6%B2%A1%E6%9C%89pop()%E5%92%8Cpush()%E7%AD%89%E6%93%8D%E4%BD%9C%E3%80%82%0A%0A%23%23%23%23%23%20%E5%8F%96%E6%A0%B7%E5%99%A8%EF%BC%88%E7%BA%B9%E7%90%86%EF%BC%89%0AGLSL%20ES%E6%94%AF%E6%8C%81%E7%9A%84%E4%B8%80%E7%A7%8D%E5%86%85%E7%BD%AE%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%BF%85%E9%A1%BB%E9%80%9A%E8%BF%87%E8%AF%A5%E7%B1%BB%E5%9E%8B%E5%8F%98%E9%87%8F%E8%AE%BF%E9%97%AE%E7%BA%B9%E7%90%86%E3%80%82%0A%E6%9C%89%E4%B8%A4%E7%A7%8D%E5%9F%BA%E6%9C%AC%E7%9A%84%E5%8F%96%E6%A0%B7%E5%99%A8%E7%B1%BB%E5%9E%8B%EF%BC%9A%0Asampler2D%0AsamplerCube%0A%E5%8F%96%E6%A0%B7%E5%99%A8%E5%8F%98%E9%87%8F%E5%8F%AA%E8%83%BD%E6%98%AFuniform%E5%8F%98%E9%87%8F%EF%BC%8C%E6%88%96%E8%80%85%E6%98%AF%E9%9C%80%E8%A6%81%E8%AE%BF%E9%97%AE%E7%BA%B9%E7%90%86%E7%9A%84%E5%87%BD%E6%95%B0%E7%9A%84%E5%8F%82%E6%95%B0%EF%BC%88%E5%A6%82texture2D%EF%BC%88%EF%BC%89%E5%87%BD%E6%95%B0%EF%BC%89%E3%80%82%0A%E5%94%AF%E4%B8%80%E8%83%BD%E8%B5%8B%E5%80%BC%E7%BB%99%E5%8F%96%E6%A0%B7%E5%99%A8%E5%8F%98%E9%87%8F%E7%9A%84%E5%B0%B1%E6%98%AF%E7%BA%B9%E7%90%86%E5%8D%95%E5%85%83%E7%BC%96%E5%8F%B7%EF%BC%8C%E8%80%8C%E4%B8%94%E5%BF%85%E9%A1%BB%E4%BD%BF%E7%94%A8WebGL%E6%96%B9%E6%B3%95gl.uniformli()%E6%9D%A5%E8%BF%9B%E8%A1%8C%E8%B5%8B%E5%80%BC%E3%80%82%0A%E9%99%A4%E4%BA%86%3D%E3%80%81%3D%3D%E5%92%8C!%3D%EF%BC%8C%E5%8F%96%E6%A0%B7%E5%99%A8%E4%B8%8D%E5%8F%AF%E4%BB%A5%E4%BD%9C%E4%B8%BA%E6%93%8D%E4%BD%9C%E6%95%B0%E5%8F%82%E4%B8%8E%E8%BF%90%E7%AE%97%E3%80%82%0A%E5%8F%96%E6%A0%B7%E5%99%A8%E7%B1%BB%E5%9E%8B%E5%8F%98%E9%87%8F%E5%8F%97%E5%88%B0%E7%9D%80%E8%89%B2%E5%99%A8%E6%94%AF%E6%8C%81%E7%9A%84%E7%BA%B9%E7%90%86%E5%8D%95%E5%85%83%E7%9A%84%E6%9C%80%E5%A4%A7%E6%95%B0%E9%87%8F%E9%99%90%E5%88%B6%E3%80%82%0A%0A%23%23%23%23%20%E7%A8%8B%E5%BA%8F%E6%B5%81%E7%A8%8B%E6%8E%A7%E5%88%B6%EF%BC%9A%E5%88%86%E6%94%AF%E5%92%8C%E5%BE%AA%E7%8E%AF%0A%23%23%23%23%23%20if%E5%92%8Cif-else%0AGLSL%20ES%E4%B8%AD%E6%B2%A1%E6%9C%89switch%E8%AF%AD%E5%8F%A5%EF%BC%8C%E8%BF%87%E5%A4%9A%E7%9A%84if%E6%88%96if-else%E8%AF%AD%E5%8F%A5%E4%BC%9A%E9%99%8D%E4%BD%8E%E7%9D%80%E8%89%B2%E5%99%A8%E7%9A%84%E6%89%A7%E8%A1%8C%E9%80%9F%E5%BA%A6%E3%80%82%0A%0A%23%23%23%23%23%20for%E8%AF%AD%E5%8F%A5%0A%E5%9C%A8for%E8%AF%AD%E5%8F%A5%E4%B8%AD%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8continue%E3%80%81break%E3%80%81discard%E3%80%82%0Adiscard%E5%8F%AA%E8%83%BD%E5%9C%A8%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%EF%BC%8C%E8%A1%A8%E7%A4%BA%E6%94%BE%E5%BC%83%E5%BD%93%E5%89%8D%E7%89%87%E5%85%83%E7%9B%B4%E6%8E%A5%E5%A4%84%E7%90%86%E4%B8%8B%E4%B8%80%E4%B8%AA%E7%89%87%E5%85%83%E3%80%82%0A%0A%23%23%23%23%20%E5%87%BD%E6%95%B0%0A%E4%B8%8D%E8%83%BD%E5%9C%A8%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%E4%B8%AD%E8%B0%83%E7%94%A8%E5%AE%83%E6%9C%AC%E8%BA%AB%EF%BC%88%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AF%B4%E4%B8%8D%E5%85%81%E8%AE%B8%E9%80%92%E5%BD%92%EF%BC%89%0A%0A%23%23%23%23%23%20%E5%8F%82%E6%95%B0%E9%99%90%E5%AE%9A%E8%AF%8D%0Ain%20%E5%90%91%E5%87%BD%E6%95%B0%E4%B8%AD%E4%BC%A0%E5%85%A5%E5%80%BC%20%20%E5%87%BD%E6%95%B0%E5%86%85%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E5%B9%B6%E4%B8%94%E4%BF%AE%E6%94%B9%E5%8F%82%E6%95%B0%E7%9A%84%E5%80%BC%EF%BC%8C%E4%BD%86%E6%98%AF%E4%B8%8D%E4%BC%9A%E5%BD%B1%E5%93%8D%E4%BC%A0%E5%85%A5%E7%9A%84%E5%8F%98%E9%87%8F%E3%80%82%0Aconst%20in%20%E5%90%91%E5%87%BD%E6%95%B0%E4%B8%AD%E4%BC%A0%E5%85%A5%E5%80%BC%20%20%E5%87%BD%E6%95%B0%E5%86%85%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E4%BD%86%E4%B8%8D%E8%83%BD%E4%BF%AE%E6%94%B9%E5%8F%82%E6%95%B0%E7%9A%84%E5%80%BC%E3%80%82%0Aout%20%E5%9C%A8%E5%87%BD%E6%95%B0%E4%B8%AD%E8%A2%AB%E8%B5%8B%E5%80%BC%E5%B9%B6%E4%BC%A0%E5%87%BA%20%E4%BC%A0%E5%85%A5%E5%8F%98%E9%87%8F%E7%9A%84%E5%BC%95%E7%94%A8%EF%BC%8C%E5%A6%82%E6%9E%9C%E5%9C%A8%E5%87%BD%E6%95%B0%E4%B8%AD%E8%A2%AB%E4%BF%AE%E6%94%B9%EF%BC%8C%E4%BC%9A%E5%BD%B1%E5%93%8D%E5%88%B0%E5%87%BD%E6%95%B0%E5%A4%96%E9%83%A8%E3%80%82%0Ainout%20%E4%BC%A0%E5%85%A5%E5%87%BD%E6%95%B0%EF%BC%8C%E5%90%8C%E6%97%B6%E5%9C%A8%E5%87%BD%E6%95%B0%E4%B8%AD%E8%A2%AB%E8%B5%8B%E5%80%BC%E5%B9%B6%E4%BC%A0%E5%87%BA%20%20%E4%BC%A0%E5%85%A5%E5%8F%98%E9%87%8F%E7%9A%84%E5%BC%95%E7%94%A8%EF%BC%8C%E5%87%BD%E6%95%B0%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E5%8F%98%E9%87%8F%E7%9A%84%E5%88%9D%E5%A7%8B%E5%80%BC%EF%BC%8C%E7%84%B6%E5%90%8E%E4%BF%AE%E6%94%B9%E5%8F%98%E9%87%8F%E7%9A%84%E5%80%BC%EF%BC%8C%E4%BC%9A%E5%BD%B1%E5%93%8D%E5%88%B0%E5%87%BD%E6%95%B0%E5%A4%96%E9%83%A8%E3%80%82%0A%0A%23%23%23%23%23%20Attribute%E5%8F%98%E9%87%8F%0Aattribute%E5%8F%98%E9%87%8F%E5%8F%AA%E8%83%BD%E5%87%BA%E7%8E%B0%E5%9C%A8%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%AD%EF%BC%8C%E5%8F%AA%E8%83%BD%E8%A2%AB%E5%A3%B0%E6%98%8E%E4%B8%BA%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%EF%BC%8C%E8%A2%AB%E7%94%A8%E6%9D%A5%E8%A1%A8%E7%A4%BA%E9%80%90%E9%A1%B6%E7%82%B9%E7%9A%84%E4%BF%A1%E6%81%AF%E3%80%82%0A%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8%E8%83%BD%E5%AE%B9%E7%BA%B3%E7%9A%84attribute%E5%8F%98%E9%87%8F%E7%9A%84%E6%9C%80%E5%A4%A7%E6%95%B0%E7%9B%AE%E4%B8%8E%E8%AE%BE%E5%A4%87%E6%9C%89%E5%85%B3%EF%BC%8C%E4%BD%86%E8%87%B3%E5%B0%91%E6%94%AF%E6%8C%818%E4%B8%AA%E3%80%82%0A%0A%23%23%23%23%23%20uniform%E5%8F%98%E9%87%8F%0A%E5%8F%AF%E4%BB%A5%E5%9C%A8%E9%A1%B6%E7%82%B9%E5%92%8C%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%AD%E4%BD%BF%E7%94%A8%EF%BC%8C%E5%BF%85%E9%A1%BB%E6%98%AF%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%EF%BC%8C%E8%80%8C%E4%B8%94%E6%98%AF%E5%8F%AA%E8%AF%BB%E7%9A%84%E3%80%82%0A%E5%A6%82%E6%9E%9C%E9%A1%B6%E7%82%B9%E5%92%8C%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%AD%E5%A3%B0%E6%98%8E%E4%BA%86%E5%90%8C%E5%90%8D%E7%9A%84uniform%E5%8F%98%E9%87%8F%EF%BC%8C%E9%82%A3%E4%B9%88%E5%AE%83%E5%B0%B1%E4%BC%9A%E8%A2%AB%E4%B8%A4%E4%B8%AA%E7%9D%80%E8%89%B2%E5%99%A8%E5%85%B1%E4%BA%AB%E3%80%82%0A%0A%23%23%23%23%23%20varying%E5%8F%98%E9%87%8F%0A%E5%BF%85%E9%A1%BB%E6%98%AF%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F%EF%BC%8C%E5%AE%83%E7%9A%84%E4%BB%BB%E5%8A%A1%E6%98%AF%E4%BB%8E%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8%E5%90%91%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E4%BC%A0%E8%BE%93%E6%95%B0%E6%8D%AE%EF%BC%8C%E5%BF%85%E9%A1%BB%E5%9C%A8%E4%B8%A4%E7%A7%8D%E7%9D%80%E8%89%B2%E5%99%A8%E4%B8%AD%E5%A3%B0%E6%98%8E%E5%90%8C%E5%90%8D%E3%80%81%E5%90%8C%E7%B1%BB%E5%9E%8B%E7%9A%84varying%E5%8F%98%E9%87%8F%E3%80%82%0A%0A%23%23%23%23%23%20%E7%B2%BE%E5%BA%A6%E9%99%90%E5%AE%9A%E8%AF%8D%0Ahighp%20%E9%AB%98%E7%B2%BE%E5%BA%A6%EF%BC%8C%E9%A1%B6%E7%82%B9%E7%9D%80%E8%89%B2%E5%99%A8%E7%9A%84%E6%9C%80%E4%BD%8E%E7%B2%BE%E5%BA%A6%0Amediump%20%E4%B8%AD%E7%B2%BE%E5%BA%A6%EF%BC%8C%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E7%9A%84%E6%9C%80%E4%BD%8E%E7%B2%BE%E5%BA%A6%0Alowp%20%E4%BD%8E%E7%B2%BE%E5%BA%A6%0A%0A%23%23%23%23%23%20%E9%A2%84%E5%A4%84%E7%90%86%E6%8C%87%E4%BB%A4%0A%23if%20%E6%9D%A1%E4%BB%B6%E8%A1%A8%E8%BE%BE%E5%BC%8F%0A%E6%9D%A1%E4%BB%B6%E8%A1%A8%E8%BE%BE%E5%BC%8F%E4%B8%BA%E7%9C%9F%EF%BC%8C%E6%89%A7%E8%A1%8C%E8%BF%99%E9%87%8C%0A%23endif%0A%0A%23ifdef%20%E6%9F%90%E5%AE%8F%0A%E5%A6%82%E6%9E%9C%E5%AE%9A%E4%B9%89%E4%BA%86%E6%9F%90%E5%AE%8F%EF%BC%8C%E6%89%A7%E8%A1%8C%E8%BF%99%E9%87%8C%0A%23endif%0A%0A%23ifndef%20%E6%9F%90%E5%AE%8F%0A%E5%A6%82%E6%9E%9C%E6%B2%A1%E6%9C%89%E5%AE%9A%E4%B9%89%E6%9F%90%E5%AE%8F%EF%BC%8C%E6%89%A7%E8%A1%8C%E8%BF%99%E9%87%8C%0A%23endif%0A%0A%E9%A2%84%E5%AE%9A%E4%B9%89%E7%9A%84%E5%86%85%E7%BD%AE%E5%AE%8F%0AGL_ES%20%E5%9C%A8OpenGL%20ES%202.0%E4%B8%AD%E5%AE%9A%E4%B9%89%E4%B8%BA1%0AGL_FRAGMENT_PRECISION_HIGH%20%E7%89%87%E5%85%83%E7%9D%80%E8%89%B2%E5%99%A8%E6%94%AF%E6%8C%81hight%E7%B2%BE%E5%BA%A6</center></body></html>